import Phaser from 'phaser'

/**
 * 资源加载页面
 * 1. 加载游戏资源
 * 2. 创建显示对象和动画
 */
export default class PreloadState extends Phaser.State {
  constructor(keyState) {
    super()
    this.keyState = keyState
  }

  init(...args) {
    console.log('ce---启动Preload页面')
  }

  preload(game) {
    this.loadAssets()
    this.createDisplayObj()
  }

  create(game) {
    console.log(this.keyState)
    if (this.keyState) {
      game.state.start(this.keyState)
    } else {
      game.state.start('NavState')
    }
  }

  /**
   * 加载资源
   */
  loadAssets() {
    const { game } = this
    //加载其他页面用到的所有资源
    game.load.image('bgnav', 'assets/images/bgnav.png')
    game.load.image('bgsongname', 'assets/images/bgsongname.png')
    game.load.image('bggame', 'assets/images/bggame.jpg')
    game.load.image('listhead', 'assets/images/listhead.png')
    game.load.image('backw', 'assets/images/backw.png')
    game.load.image('restart', 'assets/images/restart.png')
    game.load.image('save', 'assets/images/save.png')

    game.load.image('tanceng', 'assets/images/tanceng.png')
    game.load.image('listen', 'assets/images/listen.png')
    game.load.image('button', 'assets/images/button.png')
    game.load.image('buttonlan', 'assets/images/buttonlan.png')
    game.load.image('back', 'assets/images/back.png')
    game.load.image('btnhui', 'assets/images/btnhui.png')

    //处理加载失败的资源
    this.errorList = []
    game.load.onFileError.add((key, file) => {
      this.errorList.push({
        key: key,
        errorMessage: file.errorMessage,
      })
    })

    game.load.onFileComplete.add((progress) => {
      const { maskGraphics, progressImg } = this
      const length = (progress / 100) * progressImg.width
      this.maskGraphics.clear()
      maskGraphics.beginFill(0xffffff, 1)
      this.maskGraphics.drawRect(
        -progressImg.width / 2,
        -progressImg.height / 2,
        length,
        progressImg.height,
      )
      maskGraphics.endFill()
      if (progress === 100) {
        if (this.errorList.length) {
          console.log(
            'ce---加载资源失败，错误信息：' + JSON.stringify(this.errorList),
          )
        }
      }
    })
  }

  /**
   * 创建显示对象
   */
  createDisplayObj() {
    const { game } = this
    const worldWidth = game.world.width
    const worldHeight = game.world.height
    const bgpreloadImg = game.add.image(0, 0, 'bgpreload')
    bgpreloadImg.width = worldWidth
    bgpreloadImg.height = worldHeight

    const snailGroup = game.add.group()
    snailGroup.position.set(worldWidth / 2, worldHeight / 2)

    // 进度条
    const progressImg = game.add.image(0, 0, 'progress', null, snailGroup)
    progressImg.anchor.set(0.5)
    const progressScale = (worldWidth * 0.7) / progressImg.width
    progressImg.scale.set(progressScale)

    const maskGraphics = game.add.graphics(0, 0, snailGroup)
    maskGraphics.beginFill(0xffffff, 1)
    maskGraphics.drawRect(
      -progressImg.width / 2,
      -progressImg.height / 2,
      0,
      progressImg.height,
    )
    maskGraphics.endFill()
    progressImg.mask = maskGraphics

    this.maskGraphics = maskGraphics
    this.progressImg = progressImg

    // 蜗牛
    const snailImg = game.add.image(
      0,
      -progressImg.height / 2,
      'snail',
      null,
      snailGroup,
    )
    snailImg.anchor.set(0.5, 1)
    snailImg.scale.set(progressScale)

    // loading文字
    const loadingImg = game.add.image(
      0,
      progressImg.height / 2 + 10,
      'loading',
      null,
      snailGroup,
    )
    loadingImg.anchor.set(0.5, 0)
    loadingImg.scale.set(progressScale)

    const snailImgTween = game.add.tween(snailImg).to(
      {
        y: -progressImg.height / 2 - 15,
      },
      800,
      'Linear',
      true,
      0,
      -1,
      true,
    )

    const loadingTween = game.add.tween(loadingImg).to(
      {
        x: 15,
      },
      800,
      'Linear',
      true,
      0,
      -1,
      true,
    )

    // 开发者信息
    const devInfoGroup = game.add.group()
    const logoImg = game.add.image(0, 0, 'logo', null, devInfoGroup)
    logoImg.scale.set(0.08)
    const infoText = game.add.text(
      45,
      12,
      '钢琴方块，by 天天敲代码提供技术支持',
      {
        fontSize: 16,
        fill: '#fff',
        align: 'center',
      },
      devInfoGroup,
    )
    devInfoGroup.position.set(
      (worldWidth - logoImg.width - infoText.width) / 2,
      worldHeight - 55,
    )

    // 转纹理图片
    const devInfoTextTure = devInfoGroup.generateTexture()
    const devInfoTextTureImg = game.add.image(
      worldWidth / 2,
      worldHeight - 15,
      devInfoTextTure,
    )

    devInfoTextTureImg.anchor.set(0.5, 1)

    devInfoGroup.destroy()
  }
}
